<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">

  <title>Bootstrap Sandbox</title>
</head>

<body>
  <header>
    <h1 class="display-3 text-center my-4">Basic Typography</h1>
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <div class="dropdown">
            <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
              2: Utilities
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="2_2_basic_typography.html">2.2 Basic Typography</a>
              <a class="dropdown-item" href="2_3_text_alignment_display.html">2.3 Text Alignment & Display</a>
              <a class="dropdown-item" href="2_4_floats_position.html">2.4 Floats & Position</a>
              <a class="dropdown-item" href="2_5_colors_background.html">2.5: Colors & Background</a>
              <a class="dropdown-item" href="2_6_spacing.html">2.6 Spacing</a>
              <a class="dropdown-item" href="2_7_sizing.html">2.7 Sizing</a>
              <a class="dropdown-item" href="2_8_breakpoints.html">2.8 Breakpoints</a>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="dropdown">
            <button class="btn btn-success btn-block dropdown-toggle" type="button" data-toggle="dropdown">
              3: CSS Components
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="3_2_buttons.html">3.2 Buttons</a>
              <a class="dropdown-item" href="3_3_navbar.html">3.3 Navbar</a>
              <a class="dropdown-item" href="3_4_list_groups_badges.html">3.4 List Groups & Badges</a>
              <a class="dropdown-item" href="3_5_forms.html">3.5 Forms</a>
              <a class="dropdown-item" href="3_6_input_groups.html">3.6 Input Groups</a>
              <a class="dropdown-item" href="3_7_alerts_progress.html">3.7 Alerts & Progress</a>
              <a class="dropdown-item" href="3_8_tables_pagination.html">3.8 Tables & Pagination</a>
              <a class="dropdown-item" href="3_9_cards.html">3.9 Cards</a>
              <a class="dropdown-item" href="3_10_media_object.html">3.10 Media Objects</a>
              <a class="dropdown-item" href="3_11_jumbotron.html">3.11 Jumbotron</a>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="dropdown">
            <button class="btn btn-warning btn-block dropdown-toggle" type="button" data-toggle="dropdown">
              4: Grid & Flexbox
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="4_2_grid_system.html">4.2 Grid System</a>
              <a class="dropdown-item" href="4_3_grid_alignment.html">4.3 Grid Alignment</a>
              <a class="dropdown-item" href="4_4_flexbox.html">4.4 Flexbox</a>
              <a class="dropdown-item" href="4_5_auto_margins_wrapping_order.html">4.5 Auto Margins & Wrap</a>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="dropdown">
            <button class="btn btn-danger btn-block dropdown-toggle" type="button" data-toggle="dropdown">
              5: JavaScript Widgets
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="5_2_carousel.html">5.2 Carousel</a>
              <a class="dropdown-item" href="5_3_collapse.html">5.3 Collapse</a>
              <a class="dropdown-item" href="5_4_tooltips.html">5.4 Tooltips</a>
              <a class="dropdown-item" href="5_5_popovers.html">5.5 Popovers</a>
              <a class="dropdown-item" href="5_6_modals.html">5.6 Modals</a>
              <a class="dropdown-item" href="5_7_scrollspy.html">5.7 ScrollSpy</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
  </header>

  <div class="container">
    <!--####################START HERE######################-->

    <!-- HEADINGS -->
    <h1>Heading One</h1>
    <h2>Heading Two</h2>
    <h3>Heading Three</h3>
    <h4>Heading Four</h4>
    <h5 class="h2">Heading Five</h5>
    <h6>Heading Six</h6>

    <br>
    <br>


    <!-- DISPLAY CLASSES -->
    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>

    <br>
    <br>

    <!-- PARAGRAPHS -->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolore repellendus veniam consequatur vero numquam
      voluptatem quam ab expedita eum, ipsam? Necessitatibus dicta quaerat, vitae dolorum, dolor autem reiciendis sapiente.</p>

    <!-- LEAD -->
    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolore repellendus veniam consequatur vero numquam
      voluptatem quam ab expedita eum, ipsam? Necessitatibus dicta quaerat, vitae dolorum, dolor autem reiciendis sapiente.</p>

    <!-- MONOSPACE PARAGRAPH -->
    <p class="text-monospace">My monospace paragraph</p>

    <!-- STYLE CLASSES -->
    <p class="font-weight-bold">Bold Text</p>
    <p class="font-weight-normal">Normal Text</p>
    <p class="font-italic">Italic Text</p>

    <!-- TEXT TRANSFORMS -->
    <p class="text-lowercase">MAKE LOWERCASE</p>
    <p class="text-uppercase">make uppercase</p>
    <p class="text-capitalize">make capitalized</p>

    <br>
    <br>

    <!-- BLOCKQUOTES -->
    <blockquote class="blockquote">
      <p>This is a blockquote</p>
    </blockquote>

    <!-- BLOCKQUOTE RIGHT ALIGNED -->
    <blockquote class="blockquote text-right">
      <p>This is a blockquote aligned right</p>
    </blockquote>

    <!-- BLOCKQUOTE WITH FOOTER -->
    <blockquote class="blockquote text-right">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in
        <cite title="Source Title">Source Title</cite>
      </footer>
    </blockquote>

    <br>
    <br>

    <!-- TEXT TRUNCATE -->
    <div class="text-truncate">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda repellat nobis sunt qui consequatur architecto veritatis,
      iure odit, debitis pariatur perspiciatis? Asperiores facere veniam, totam ullam dignissimos voluptate atque! Eos, animi
      quos. Sint magni nulla provident et consequatur officia tempora!
    </div>

    <br>
    <br>

    <!-- LISTS -->
    <ul class="list-unstyled">
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
    </ul>

    <!-- INLINE LIST -->
    <ul class="list-inline">
      <li class="list-inline-item">Lorem ipsum</li>
      <li class="list-inline-item">Lorem ipsum </li>
      <li class="list-inline-item">Lorem ipsum </li>
    </ul>
  </div>

  <div style="margin-top:500px;"></div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
    crossorigin="anonymous"></script>
</body>

</html>